<template>
	<!-- 顶部搜索栏 -->
	<view class="search-container">
		<view class="search-area">
			<uni-search-bar v-model="searchValue" @confirm="search" @clear="clearSearch" placeholder="搜索文件夹"
				cancel-button="none" background-color="#f5f5f5">
				<template v-slot:searchIcon>
					<uni-icons color="#666" size="18" type="search" />
				</template>
			</uni-search-bar>
		</view>
	</view>

	<!-- 文件夹列表 -->
	<view class="folder-list">
		<view class="folder-grid">
			<view class="folder-item" v-for="(folder, index) in filteredFiles" :key="index"
				@click="navigateToFolder(folder)" :class="{'folder-item-pressed': folder.isPressed}"
				@touchstart="handleTouchStart(index)" @touchend="handleTouchEnd(index)">
				<uni-icons custom-prefix="iconfont" size="48" :type="folder.icon" color="#4CC9FE" class="folder-icon" />
				<text class="folder-name">{{ folder.name }}</text>
			</view>
		</view>
	</view>

	<!-- 空状态展示 -->
	<view v-if="filteredFiles.length === 0" class="empty-state">
		<uni-icons type="folder" size="64" color="#ccc" />
		<text class="empty-text">暂无文件夹</text>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default {
		data() {
			return {
				files: [],
				searchValue: '',
				choosenTeam: null
			}
		},

		computed: {
			filteredFiles() {
				if (!this.searchValue) return this.files;
				const searchText = this.searchValue.toLowerCase();
				return this.files.filter(file =>
					file.name.toLowerCase().includes(searchText)
				);
			}
		},

		onShow() {
			this.fetchTeam();
			this.fetchProjects();
		},

		methods: {
			// 搜索相关
			search() {
				// 搜索逻辑已由计算属性处理
			},

			clearSearch() {
				this.searchValue = '';
			},

			// 导航
			navigateToFolder(folder) {
				if (!folder) return;

				uni.navigateTo({
					url: `/pages/resource/folder?folderName=${folder.name}&fileProjectId=${folder.projectId}`
				});
			},

			// 触摸效果
			handleTouchStart(index) {
				this.$set(this.files[index], 'isPressed', true);
			},

			handleTouchEnd(index) {
				setTimeout(() => {
					this.$set(this.files[index], 'isPressed', false);
				}, 100);
			},

			// API调用
			async fetchProjects() {
				if (!this.choosenTeam?.teamId) return;

				try {
					const res = await api.listProjects({
						teamId: this.choosenTeam.teamId
					});

					this.files = res.data.data.map(project => ({
						name: project.projectName,
						icon: "icon-wenjianjia-copy",
						projectId: project.projectId,
						isPressed: false
					}));
				} catch (error) {
					console.error('获取项目列表失败:', error);
					uni.showToast({
						title: '获取项目列表失败',
						icon: 'none'
					});
				}
			},

			fetchTeam() {
				this.choosenTeam = uni.getStorageSync("TheChoosenTeam");
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/font_4719143_73svg6uhuri/iconfont.css';

	.search-container {
		padding: 12px 16px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.folder-list {
		padding: 16px;
		background-color: #f8f8f8;
		min-height: calc(100vh - 60px);
	}

	.folder-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		padding: 8px;
	}

	.folder-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px 8px;
		background-color: #fff;
		border-radius: 8px;
		transition: transform 0.2s, box-shadow 0.2s;

		&:active,
		&.folder-item-pressed {
			transform: scale(0.95);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}
	}

	.folder-icon {
		margin-bottom: 8px;
	}

	.folder-name {
		font-size: 12px;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 48px 0;

		.empty-text {
			margin-top: 16px;
			color: #999;
			font-size: 14px;
		}
	}
</style>